<template>
	<view class="u-page">
		<div class="cards">
			<div class="card" v-for="item in dtReport" :key="item.SSC_ORDER_LINES_LOTS_ID" @click="handleClickDt(item)">
				<div>订单明细：{{item.SSC_ORDER_LINES_LOTS_ID}}</div>
				<div>订单号码：{{item.ORDER_NO}}</div>
				<div>开单日期：{{formatDate(item.MAKE_DATE)}}</div>
				<div>商品信息：{{item.GOODS_INFO}}</div>
				<div>生产厂家：{{item.PRODUCT_LOCATION}}</div>
				<div>供应商：{{item.VENDER_NAME}}</div>
				<div>客户信息：{{item.CLIENT_NAME}}</div>
				<div>销售部门：{{item.SALE_ORG_NAME}}</div>
				<div>销售代表：{{item.SALE_NAME}}</div>
				<div>开票员：{{item.CREATER_NAME}}</div>
				<div>采购员：{{item.BUYER_NAME}}</div>
				<div>库存数量：{{item.QTY}}</div>
				<div>登记数量：{{item.ACT_QTY||''}}</div>
				<div>批号：{{item.LOT_NO}}</div>		
				<div>有效期：{{formatDate(item.EXPIRE_DATE)}}</div>
				<div>截止日期：{{formatDate(item.COLLECT_END_DATE)}}</div>
			</div>
		</div>

		<!-- 悬浮搜索 -->
		<view class="fixed-search" @click="handleRightClick">
			<u-icon name="search" color="#fff" size="28"></u-icon>
		</view>
		<!-- 搜索弹窗 -->
		<u-popup :show="show" closeable @close="handleClose" @open="handleOpen" mode="right">
			
			<view class="popup-card">
				<u--form labelPosition="top" :model="model1" :rules="rules" ref="form1">
					<u-form-item label="客户ID" prop="userInfo.ClientId" borderBottom ref="ClientId"
						@click="showKh = true;hideKeyboard()">
						<u--input v-model="model1.userInfo.ClientId" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>
					<u-form-item label="客户名称" prop="userInfo.ClientName" borderBottom ref="ClientId"
						@click="showKh = true;hideKeyboard()">
						<u--input v-model="model1.userInfo.ClientName" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>
					<u-form-item label="产品编码" prop="userInfo.goodsCode" borderBottom ref="goodsCode">
						<u--input v-model="model1.userInfo.goodsCode" placeholder="请输入..." border="none"></u--input>
					</u-form-item>
					<u-form-item label="销售代表" prop="userInfo.saleName" borderBottom ref="saleName">
						<u--input v-model="model1.userInfo.saleName" placeholder="请输入..." border="none"></u--input>
					</u-form-item>
					<u-form-item label="批号信息" prop="userInfo.ls_lotno" borderBottom ref="ls_lotno">
						<u--input v-model="model1.userInfo.ls_lotno" placeholder="请输入..." border="none"></u--input>
					</u-form-item>
					<u-form-item label="登记情况" prop="userInfo.ls_dj_flag" borderBottom ref="ls_dj_flag"
						@click="showDj = true; hideKeyboard()">
					<u--input 
						v-model="model1.userInfo.ls_dj_flag" 
						placeholder="请点击选择..." 
						readonly
						border="none">
					</u--input>
					</u-form-item>
					<u-form-item label="销售部门" prop="userInfo.SaleOrg_name" borderBottom ref="SaleOrg_name"
						@click="showDepartment = true; hideKeyboard()">
						<u--input v-model="model1.userInfo.SaleOrg_name" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="政策录入开始" prop="userInfo.StartDate" borderBottom ref="item1"
						@click="showStartDate = true; hideKeyboard()">
						<u--input v-model="model1.userInfo.StartDate" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="政策录入开始" prop="userInfo.EndDate" borderBottom ref="item1"
						@click="showDate = true; hideKeyboard()">
						<u--input v-model="model1.userInfo.EndDate" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none">
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<!-- 部门 -->
			<u-picker title="销售部门" :show="showDepartment" ref="uPicker" :columns="saleList" keyName="SALE_ORG_NAME"
				@close="handleCancelDepartment" @cancel="handleCancelDepartment" @change="changeHandler"
				@confirm="handleConfirmDepartment"></u-picker>
			<!-- 登记情况 -->
                <u-picker 
                    title="登记情况" 
                    :show="showDj" 
                    ref="uPicker" 
                    :columns="djList" 
                    keyName="label"
                    @close="handleCancelDj" 
                    @cancel="handleCancelDj"
                    @confirm="handleConfirmDj"
                    @change="changeHandler2"
                />
			<!-- 日期 -->
			<u-datetime-picker title="政策录入开始日期" :show="showStartDate" :value="Startdate" mode="date" closeOnClickOverlay
				@cancel="handleCancelDates" ref="datetimePicker" @close="handleCancelDates" @confirm="handleConfirms">
			</u-datetime-picker>
			<u-datetime-picker title="政策录入结束日期" :show="showDate" :value="date" mode="date" closeOnClickOverlay
				@cancel="handleCancelDate" ref="datetimePicker" @close="handleCancelDate" @confirm="handleConfirm">
			</u-datetime-picker>
			<u-popup :show="showKh" mode="center" :round="10" closeable @close="handleCloseKh">
				<view class="kh-card">
					<div class="search">
						<u-search placeholder="请输入..." :showAction="false" v-model="keyword" @search="handleSearchKh">
						</u-search>
					</div>
					<div class="cards">
						<div class="card" v-for="item in khList" :key="item.COM_PARTY_ID" @click="handleClickKh(item)">
							<div>客户ID：{{item.COM_PARTY_ID}}</div>
							<div>客户名称：{{item.PARTY_NAME}}</div>
							<div>客户代码：{{item.PARTY_OPCODE}}</div>
							<div>拼音：{{item.SPELL}}</div>
						</div>
					</div>
				</view>
			</u-popup>
			<!-- 底部固定按钮 -->
			<view class="btn-group">
			<u-button
				:plain="true"
				text="重置"
				size="small"
				:hairline="true"
				@click="handleReset"
			></u-button>
			<u-button type="primary" text="查询" size="small" @click="handleSubmit"></u-button>
			</view>
		</u-popup>

		<!-- 弹窗显示 -->
		<u-popup :show="showModal" closeable mode="right" @close="handleCancelPx">
			<view class="drawer">
				<!-- 滚动内容区域 -->
   				<scroll-view class="drawer-body" :scroll-y="true">
					<view class="px-card">
				<view class="detail-item">
					<text class="label">订单明细：</text>
					<text class="value">{{ currentRow.SSC_ORDER_LINES_LOTS_ID }}</text>
				</view>
				<view class="detail-item">
					<text class="label">单据类型：</text>
					<text class="value">{{ currentRow.ORDER_TYPE }}</text>
				</view>
				<view class="detail-item">
					<text class="label">订单号码：</text>
					<text class="value">{{ currentRow.ORDER_NO }}</text>
				</view>
				<view class="detail-item">
					<text class="label">客户名称：</text>
					<text class="value">{{ currentRow.CLIENT_NAME }}</text>
				</view>
				<view class="detail-item">
					<text class="label">销售部门：</text>
					<text class="value">{{ currentRow.SALE_ORG_NAME }}</text>
				</view>
				<view class="detail-item">
					<text class="label">销售代表：</text>
					<text class="value">{{ currentRow.SALE_NAME }}</text>
				</view>
				<view class="detail-item">
					<text class="label">开票员：</text>
					<text class="value">{{ currentRow.CREATER_NAME }}</text>
				</view>
				<view class="detail-item">
					<text class="label">开单日期：</text>
					<text class="value">{{ formatDate(currentRow.MAKE_DATE) }}</text>
				</view>
				<view class="detail-item">
					<text class="label">商品信息：</text>
					<text class="value">{{ currentRow.GOODS_INFO }}</text>
				</view>
				<view class="detail-item">
					<text class="label">上市许可持有人/生产厂家：</text>
					<text class="value">{{ currentRow.PRODUCT_LOCATION }}</text>
				</view>
				<view class="detail-item">
					<text class="label">批号：</text>
					<text class="value">{{ currentRow.LOT_NO }}</text>
				</view>
				<view class="detail-item">
					<text class="label">生产日期：</text>
					<text class="value">{{ formatDate(currentRow.PROD_DATE) }}</text>
				</view>
				<view class="detail-item">
					<text class="label">效期：</text>
					<text class="value">{{ formatDate(currentRow.EXPIRE_DATE) }}</text>
				</view>
				<view class="detail-item">
					<text class="label">单位：</text>
					<text class="value">{{ currentRow.UNIT_NAME }}</text>
				</view>				
				<view class="detail-item">
					<text class="label">库存数量：</text>
					<text class="value">{{ currentRow.QTY }}</text>
				</view>
				<view class="detail-item error-item" style="display:flex;align-items:center;">
					<text class="label" style="width:180rpx;color:#e43d3d;">登记数量：</text>
					<input
						v-model="currentRow.ACT_QTY"
						placeholder="请输入数量"
						placeholder-class="input-placeholder"
						class="error-input"
						style="flex:1;font-size:30rpx;color:#e43d3d;"
					/>
				</view>

				<view class="detail-item">
					<text class="label">政策录入日期：</text>
					<text class="value">{{ formatDate(currentRow.CREATE_DATE) }}</text>
				</view>
				<view class="detail-item">
					<text class="label">联动日期：</text>
					<text class="value">{{ formatDate(currentRow.LINKAGE_DATE) }}</text>
				</view>
				<view class="detail-item">
					<text class="label">收集截止：</text>
					<text class="value">{{ formatDate(currentRow.COLLECT_END_DATE) }}</text>
				</view>
				<view class="detail-item">
					<text class="label">含税单价：</text>
					<text class="value">{{ currentRow.SOURCE_PUR_PRICE }}</text>
				</view>
				<view class="detail-item">
					<text class="label">含税金额：</text>
					<text class="value">{{ currentRow.LOT_AMOUNT }}</text>
				</view>
				<view class="detail-item">
					<text class="label">联动后价格：</text>
					<text class="value">{{ currentRow.NOW_PRICE }}</text>
				</view>
				<view class="detail-item">
					<text class="label">联动前价格：</text>
					<text class="value">{{ currentRow.SOURCE_PRICE }}</text>
				</view>
				<view class="detail-item">
					<text class="label">联动后进价：</text>
					<text class="value">{{ currentRow.NOW_PUR_PRICE }}</text>
				</view>
				<view class="detail-item">
					<text class="label">联动前进价：</text>
					<text class="value">{{ currentRow.SOURCE_PUR_PRICE }}</text>
				</view>
				<view class="detail-item">
					<text class="label">补偿数量：</text>
					<text class="value">{{ currentRow.BC_AMOUNT|| '' }}</text>
				</view>
				<view class="detail-item">
					<text class="label">采购员：</text>
					<text class="value">{{ currentRow.BUYER_NAME }}</text>
				</view>
				<view class="detail-item">
					<text class="label">供应商名称：</text>
					<text class="value">{{ currentRow.VENDER_NAME }}</text>
				</view>
				<view class="detail-item">
					<text class="label">联动政策ID：</text>
					<text class="value">{{ currentRow.HNYY_PRICE_LINKAGE_LIST_ID }}</text>
				</view>
				<view class="detail-item">
					<text class="label">登记状态：</text>
					<text class="value">{{ currentRow.UPLOAD_FLAG }}</text>
				</view>			
			</view>
				</scroll-view>
			<view class="drawer-footer">
				<button class="confirm-btn" @click="handleDetermine">保存</button>
			</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import store from "@/store";
	import dayjs from "dayjs"
	import _ from "lodash"
	import {
		getSaleDepartment,
		searchKh,
		searchDengji,
		updateDengji
	} from "@/api";
	export default {
		filters: {
			filterTimes(val) {
				if (val) {
					return dayjs(val).format("YYYY-MM-DD")
				} else {
					return val
				}
			},
			filterOrgName(val) {
				if (val) {
					return val.substr(0, 3)
				} else {
					return ''
				}
			}
		},
		data() {
			return {
				subAmount: Number(0).toFixed(2),
				writeAmount: Number(0).toFixed(2),
				showModal: false,
				currentRow: {},  // 保存当前点击的数据
				title: "提示",
				content: "是否确认提交?",
				page: {
					current: 1,
					size: 10,
					total: 0
				},
				showStartDate: false,
				khList: [],
				keyword: "",
				showKh: false,
				showDepartment: false,
				showDj: false,
				showDate: false,
				date: Number(new Date()),
				Startdate: Number(new Date()),
				status_height: 44,
				show: false,
				NowLotId: "",
				djList: [
                            [
                                { label: '已登记', value: 'TRUE' },
                                { label: '未登记', value: 'FALSE' }
                            ]
                    ],
				model1: {
					userInfo: {
						SaleOrg: "",
						ClientId: "",
						ClientCode: "",
						StartDate: dayjs().startOf('month').format('YYYY-MM-DD'),
						EndDate: dayjs().format('YYYY-MM-DD'),
						goodsCode: "",
						purNo: "",
						px: "false",
						px_name: "记账日期",
						userid: "",
						pagesize: 1,
						pageindex: 10,
						ls_lotno:"",
						ls_dj_flag:"",
						ls_user_type:""

					},
				},
				formData: {
					ls_client_id: '',
					ls_client_name: '',
					goods_code: '',
					ls_sale_name: '',
					ls_sale_org: '',
					ls_lotno: '',
					ls_dj_flag: '',
					ls_create_start: '',
					ls_create_end: '',
					ls_user_type: ''
				},

				dtReport: [], // 政策查询结果
				rules: {
					'userInfo.ClientId': {
						type: 'string',
						required: true,
						message: '请选择客户',
						trigger: ['blur', 'change']
					},
				},
				saleList: [
					[]
				],
				dtReport: [
					
				],
				dtReport1: [
					
				],
				gridview1: [],
				gridview2: []
			}
		},
		computed: {
			remainAmount() {
				return Number(this.subAmount - this.writeAmount).toFixed(2)
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		onLoad() {
			this.status_height = store.state.status_height
			// 请求销售部门和编码
			this.fetchSaleDepartment()
		},
		methods: {	
			formatDate(value) {
				if (!value) return ''
				return value.split('T')[0]
			},
			// 重置
			handleReset() {
				this.model1.userInfo = {
					SaleOrg: "",
					ClientId: "",
					ClientCode: "",
					StartDate: dayjs().startOf('month').format('YYYY-MM-DD'),
					EndDate: dayjs().format('YYYY-MM-DD'),
					goodsCode: "",
					purNo: "",
					px: "false",
					px_name: "记账日期",
					userid: "",
					pagesize: 1,
					pageindex: 10,
					ls_lotno:"",
					ls_dj_flag:"",
					ls_user_type:""
				}
				this.formData = {
					ls_client_id: '',
					ls_client_name: '',
					goods_code: '',
					ls_sale_name: '',
					ls_sale_org: '',
					ls_lotno: '',
					ls_dj_flag: '',
					ls_create_start: '',
					ls_create_end: '',
					ls_user_type: '',
					ls_user_sets_id:'',
					ls_inv_owner:''
				}
				this.dtReport = []
			},
			handleConfirmDepartment(val) {
				const row = val.value[0]
				this.model1.userInfo.SaleOrg_name = row.SALE_ORG_NAME
				this.model1.userInfo.SaleOrg = row.SALE_ORG
				this.model1.userInfo.SHORT_CODE = row.POSTCODE
				this.handleCancelDepartment()
			},
			handleCancelDates() {
				this.showStartDate = false
			},
			handleCancelDates() {
				this.showStartDate = false
			},
			handleConfirmDj(val) {
				const row = val.value[0]
				this.model1.userInfo.ls_dj_flag = row.label
				this.handleCancelDj()
			},
			 handleCancelDj() {
                this.showDj = false
			},
			handleConfirms(e) {
				this.showStartDate = false
				this.model1.userInfo.StartDate = dayjs(e.value).format('YYYY-MM-DD')
			},
			handleConfirm(e) {
				this.showDate = false
				this.model1.userInfo.EndDate = dayjs(e.value).format('YYYY-MM-DD')
			},
			handleClickKh(row) {
				this.showKh = false
				this.model1.userInfo.ClientCode = row.PARTY_OPCODE
				this.model1.userInfo.ClientId = row.COM_PARTY_ID
				this.model1.userInfo.ClientName = row.PARTY_NAME
			},
			// 搜索客户
			async handleSearchKh(val) {
				if (!_.trim(val)) {
					return uni.showToast({
						title: "请输入搜索关键词"
					})
				}
				uni.showLoading({
					title: "搜索中",
					mask: true
				})
				try {
					const userinfo = uni.getStorageSync('userinfo')
					const res = await searchKh(val, userinfo.USER_ID)
					if (res.State == 1) {
						this.khList = res.Data
					} else {
						uni.showToast({
							title: res.Msg,
							icon: "error"
						})
					}
				} catch (e) {
					//TODO handle the exception
				} finally {
					uni.hideLoading()
				}
			},

			// 提交
			async handleSubmit() {
				uni.showLoading({
					title: '正在查询...',
					mask: true   
				})

				try {
						this.formData.ls_client_id = this.model1.userInfo.ClientId||''
						this.formData.ls_client_name = this.model1.userInfo.ClientName||''
						this.formData.goods_code = this.model1.userInfo.goodsCode||''
						this.formData.ls_sale_name = this.model1.userInfo.saleName||''
						this.formData.ls_sale_org = this.model1.userInfo.SaleOrg||''
						this.formData.ls_lotno = this.model1.userInfo.ls_lotno||''
						if(this.model1.userInfo.ls_dj_flag=='已登记'){
							this.formData.ls_dj_flag = 'TRUE'||''
						}else if(this.model1.userInfo.ls_dj_flag=='未登记'){
							this.formData.ls_dj_flag = 'FALSE'||''
						}
						
						this.formData.ls_create_start = this.model1.userInfo.StartDate
						this.formData.ls_create_end = this.model1.userInfo.EndDate
						this.formData.ls_user_type = uni.getStorageSync('userinfo').USER_TYPE||''
						this.formData.ls_user_name= uni.getStorageSync('userinfo').USER_NAME||''
						this.formData.ls_inv_owner = uni.getStorageSync('userinfo').COM_PARTY_ID||''
						this.formData.ls_user_sets_id= uni.getStorageSync('userinfo').SETS_ID||''

						console.log('this.formData',this.formData)
						const res = await searchDengji(this.formData)

						if (res.State === 1) {
						this.dtReport = res.Data
						this.show = false
						
					} else {
						uni.showToast({ title: res.Msg || '查询失败', icon: 'none' })
					}
				} catch (e) {
					uni.showToast({ title: '网络错误', icon: 'none' })
				} finally {
					uni.hideLoading()   // 关闭加载框
				}
			},

			handleCancelPx() {
				this.showModal = false
			},
			handleClickDt(row){
				this.currentRow = row  // 保存当前点击的数据
			  	this.showModal = true  // 打开弹窗
				console.log('row',row)
				this.NowLotId=row.SSC_ORDER_LINES_LOTS_ID
			},
			handleCloseKh() {
				this.showKh = false
			},
			// 修改数量
			async handleDetermine() {
			  const actQty = Number(this.currentRow.ACT_QTY) || 0
			  const qty = Number(this.currentRow.QTY) || 0
			
			if (actQty < 0) {
			  uni.showToast({
			    title: '登记数量不能为负数',
			    icon: 'none',
			    duration: 2000
			  })
			  return
			}
			
			  // 校验数量
			  if (actQty > qty) {
			    uni.showToast({
			      title: '登记数量不能大于库存数量',
			      icon: 'none',
			      duration: 2000
			    })
			    return
			  }
			
			  // 确认对话框
			  uni.showModal({
			    title: '确认保存',
			    content: `确定要保存登记数量 ${actQty} 吗？`,
			    success: async (res) => {
			      if (res.confirm) {
			        await this.submitData(actQty)
			      }
			    }
			  })
			},
			
			// 提取提交逻辑到单独方法
			async submitData(actQty) {
			  const data = {
			    quantity: actQty,
			    userid: uni.getStorageSync('userinfo').SALER,
			    lotid: this.NowLotId
			  }
			
			  uni.showLoading({
			    title: '正在提交...',
			    mask: true
			  })
			
			  try {
			    const res = await updateDengji(data)
			    console.log('res', res)
			
			    if (res.State == 1) {
			      uni.showToast({ 
			        title: '修改成功', 
			        icon: 'success',
			        duration: 1500
			      })
			      
			      // 更新本地数据
			      const index = this.dtReport.findIndex(item => 
			        item.SSC_ORDER_LINES_LOTS_ID === this.NowLotId
			      )
			      if (index !== -1) {
			        this.$set(this.dtReport[index], 'ACT_QTY', actQty)
			      }
			      
			      setTimeout(() => {
			        this.showModal = false
			      }, 1500)
			    } else {
			      uni.showToast({ 
			        title: res.Msg || '修改失败', 
			        icon: 'none',
			        duration: 2000
			      })
			    }
			  } catch (e) {
			    uni.showToast({ 
			      title: '网络错误，请重试', 
			      icon: 'none',
			      duration: 2000
			    })
			  } finally {
			    uni.hideLoading()
			  }
			},
			// async handleDetermine() {
			// 	const actQty = Number(this.currentRow.ACT_QTY) || 0
			// 	const qty = Number(this.currentRow.QTY) || 0

			// 	// 校验数量
			// 	if (actQty > qty) {
			// 		uni.showToast({
			// 			title: '库存数量不能大于数量',
			// 			icon: 'none'
			// 		})
			// 		return // 直接中断，不再继续提交
			// 	}

			// 	const data = {
			// 		quantity: actQty,
			// 		userid: uni.getStorageSync('userinfo').SALER,
			// 		lotid: this.NowLotId
			// 	}

			// 	// 打开遮罩层
			// 	uni.showLoading({
			// 		title: '正在提交...',
			// 		mask: true // 开启遮罩，禁止触摸穿透
			// 	})

			// 	try {
			// 		const res = await updateDengji(data)
			// 		console.log('res', res)

			// 		// 修改 handleDetermine 方法中的成功处理部分
			// 		if (res.State == 1) {
			// 		  uni.showToast({ 
			// 		    title: '修改成功', 
			// 		    icon: 'success',
			// 		    duration: 3000  // 确保显示1.5秒
			// 		  })
					  
			// 		  // 延迟关闭弹窗，确保用户看到提示
			// 		  setTimeout(() => {
			// 		    this.showModal = false
			// 		    // 可选：重新查询数据刷新列表
			// 		    this.handleSubmit()
			// 		  }, 3000)
			// 		} else {
			// 		  uni.showToast({ 
			// 		    title: res.Msg || '修改失败', 
			// 		    icon: 'none',
			// 		    duration: 3000  // 错误信息显示更久
			// 		  })
			// 		}
			// 	} catch (e) {
			// 		uni.showToast({ title: '网络错误', icon: 'none' })
			// 	} finally {
			// 		uni.hideLoading()
			// 	}
			// },


			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				const row = this.saleList[columnIndex][index]
				this.model1.userInfo.SaleOrg_name = row.SALE_ORG_NAME
				this.model1.userInfo.SaleOrg = row.SALE_ORG
				this.model1.userInfo.SHORT_CODE = row.POSTCODE
			},
			 changeHandler2(e) {
                const {
                    columnIndex,
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                const row = this.djList[columnIndex][index]
                this.model1.userInfo.ls_dj_flag = row.DJ_FLAG
            },
			async fetchSaleDepartment() {
				const userinfo = uni.getStorageSync('userinfo')
				const res = await getSaleDepartment(userinfo.COM_PARTY_ID)
				if (res.State == 1) {
					const {
						Data
					} = res
					this.saleList[0] = Data
				}
			},
			handleCancelDepartment() {
				this.showDepartment = false
			},
			handleCancelDate() {
				this.showDate = false
			},
			handleClose() {
				this.show = false
			},
			handleOpen() {

			},
			handleRightClick() {
				this.show = true
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		background-color: $u-bg-color;
	}
	.popup-card {
		padding: 50rpx 32rpx;
		width: calc(100vw - 64rpx);
		height: calc(100vh - 100rpx);
		overflow-y: scroll;
	}

	.kh-card {
		padding: 20rpx 32rpx;
		width: calc(100vw - 64rpx);
		height: calc(100vh - 100rpx);
		overflow-y: scroll;

		.search {
			margin-top: 80rpx;
			margin-bottom: 50rpx;
		}

		.cards {
			.card {
				box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, .1);
				padding: 24rpx;
				border-radius: 8rpx;
				margin-bottom: 32rpx;

				div {
					font-size: 28rpx;
					line-height: 48rpx;
					color: #333333;
				}
			}
		}
	}

	.btn-group {
		position: sticky;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		padding: 10px;
		background-color: #fff;
		z-index: 10;
	}

	.fixed-search {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		right: 8rpx;
		top: 50%;
		background-color: $u-primary;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
	}

	/deep/.u-form-item__body__left {
		width: 200rpx !important;
	}

	/deep/.u-form-item__body__left__content__label {
		font-size: 28rpx !important;
	}

	.panel {
		.content {
			display: grid;
			width: 100%;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 12rpx;

			.col {
				width: 100%;
				margin-bottom: 10rpx;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				span {
					&:nth-child(2) {
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}
	}

	.u-input__content__field-wrapper input {
		font-size: 24rpx !important;
	}

	.col .u-input {
		padding: 0 !important;
		width: 160rpx !important;
	}

	.tool-page {
		padding: 0 36rpx;
		.remark {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			span {
				font-size: 28rpx;
			}

			/deep/.u-input {
				display: inline !important;
				background-color: #fff !important;
				max-width: 600rpx !important;
				padding: 6rpx 9rpx !important;
			}
		}

		.page {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			span {
				font-size: 28rpx;
			}

			/deep/.u-input {
				display: inline !important;
				background-color: #fff !important;
				max-width: 100rpx !important;
				padding: 6rpx 9rpx !important;
			}

			.search-btn {
				margin-left: 10rpx;
				font-size: 28rpx;
				background-color: $u-primary;
				padding: 12rpx 18rpx !important;
				color: #fff;
				border-radius: 8rpx;
				cursor: pointer;
			}
		}

		.remark {}
	}

	.search-price {
		position: fixed;
		width: 100%;
		padding-top: 30rpx;
		background-color: #fff;
		z-index: 50;
		top: 62rpx;
		ul {
			padding: 0 32rpx;
			li {
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				span {
					font-size: 24rpx;
					margin-right: 20rpx;
				}

				/deep/.u-input {
					background-color: #eeeeef !important;
				}

			}
		}
	}

	.fixed-search {
		/deep/.u-icon__icon {
			font-size: 56rpx !important;
		}
	}

.cards {
			.card {
				box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, .1);
				padding: 24rpx;
				border-radius: 8rpx;
				margin-bottom: 32rpx;

				div {
					font-size: 28rpx;
					line-height: 48rpx;
					color: #333333;
				}
			}
		}
.popup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}


.popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
  padding-bottom: 120rpx; /* 预留按钮高度 */
}


.popup-footer {
  position: sticky;  /* 相对于容器底部固定 */
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 10;
}

.confirm-btn {
  width: 100%;
  background-color: #2979ff;
  color: #fff;
  border-radius: 8rpx;
  height: 88rpx;
}



.drawer {
  position: relative;
  width: 100vw;
  height: 100vh;              /* 关键：让内部高度可算 */
  background: #fff;
}


.drawer-body {
  height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
  height: calc(100vh - 120rpx - constant(safe-area-inset-bottom)); 
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20rpx;
}

.drawer-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 16rpx 20rpx calc(16rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));   
  z-index: 10;
}

.detail-item {
  padding: 16rpx 0;
  border-bottom: 1px solid #eee;
//   display: flex;
  justify-content: space-between;
}
.label { font-size: 28rpx; color: #666; }
.value { 
	font-size: 31rpx; color: #333; 
	// text-align: right; 
}

/* 按钮 */
.confirm-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #2979ff;
  color: #fff;
  border-radius: 12rpx;
}


</style>
